<template>
  <div class="header-editor">
    <el-form :model="localConfig" label-width="100px" size="small">
      <!-- 标题设置 -->
      <el-form-item label="主标题">
        <el-input v-model="localConfig.title" placeholder="请输入主标题" />
      </el-form-item>

      <el-form-item label="副标题">
        <el-input v-model="localConfig.subtitle" placeholder="请输入副标题" />
      </el-form-item>

      <!-- Logo上传 -->
      <el-form-item label="Logo">
        <el-upload
          class="logo-uploader"
          action="#"
          :show-file-list="false"
          :before-upload="beforeLogoUpload"
          :http-request="handleLogoUpload"
        >
          <div v-if="localConfig.logo" class="logo-preview">
            <img :src="localConfig.logo" alt="Logo" class="logo-image">
            <div class="logo-actions">
              <el-button size="mini" type="primary" @click.stop="replaceLogo">替换</el-button>
              <el-button size="mini" type="danger" @click.stop="removeLogo">删除</el-button>
            </div>
          </div>
          <div v-else class="upload-placeholder">
            <i class="el-icon-plus"></i>
            <div class="upload-text">上传Logo</div>
          </div>
        </el-upload>
      </el-form-item>

      <!-- Logo尺寸 -->
      <el-form-item v-if="localConfig.logo" label="Logo尺寸">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-input v-model="localConfig.logoWidth" placeholder="宽度，如: 80px">
              <template slot="prepend">宽</template>
            </el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="localConfig.logoHeight" placeholder="高度，如: 60px">
              <template slot="prepend">高</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 额外信息 -->
      <el-form-item label="额外信息">
        <el-input
          v-model="localConfig.extraInfo"
          type="textarea"
          :rows="3"
          placeholder="请输入额外信息，支持多行"
        />
        <div class="help-text">支持使用变量，如: {{currentDate}} {{currentTime}}</div>
      </el-form-item>

      <!-- 底部信息 -->
      <el-form-item label="底部信息">
        <el-input v-model="localConfig.bottomInfo" placeholder="请输入底部信息" />
      </el-form-item>

      <!-- 显示设置 -->
      <el-form-item label="显示设置">
        <el-checkbox v-model="localConfig.showBorder">显示底部边框</el-checkbox>
      </el-form-item>

      <!-- 背景色 -->
      <el-form-item label="背景颜色">
        <el-color-picker v-model="localConfig.backgroundColor" />
      </el-form-item>

      <!-- 标题对齐 -->
      <el-form-item label="标题对齐">
        <el-radio-group v-model="localConfig.titleAlign">
          <el-radio label="left">左对齐</el-radio>
          <el-radio label="center">居中</el-radio>
          <el-radio label="right">右对齐</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="editor-actions">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderEditor',
  props: {
    headerConfig: {
      type: Object,
      default: () => ({
        title: '检测报告',
        subtitle: '',
        logo: null,
        showBorder: true,
        extraInfo: '',
        bottomInfo: '',
        backgroundColor: '#ffffff',
        titleAlign: 'center',
        logoWidth: '80px',
        logoHeight: '60px'
      })
    }
  },
  data() {
    return {
      localConfig: JSON.parse(JSON.stringify(this.headerConfig))
    }
  },
  methods: {
    beforeLogoUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('Logo大小不能超过 2MB!')
        return false
      }
      return true
    },

    handleLogoUpload(options) {
      const file = options.file
      const reader = new FileReader()
      
      reader.onload = (e) => {
        this.localConfig.logo = e.target.result
      }
      reader.readAsDataURL(file)
    },

    replaceLogo() {
      this.localConfig.logo = ''
      document.querySelector('.logo-uploader .el-upload').click()
    },

    removeLogo() {
      this.localConfig.logo = ''
    },

    save() {
      this.$emit('save', this.localConfig)
    },

    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.header-editor {
  padding: 20px;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 100px;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8c939d;
}

.upload-placeholder i {
  font-size: 20px;
  margin-bottom: 5px;
}

.upload-text {
  font-size: 12px;
}

.logo-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-actions {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.help-text {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.editor-actions {
  text-align: right;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e6e8eb;
}
</style>